{
    let music = document.getElementById("music");
    let playBtn = document.getElementById("playBtn");
    let musicPic = document.getElementById("musicPic");
    let sName = document.getElementById("sName");
    let geshou = document.getElementById("geshou");
    let tTime = document.getElementById("tTime");
    let gequJD = document.getElementById("gequJD");
    let cTime = document.getElementById("cTime");
    let gequJDBar = document.getElementById("gequJDBar");
    let vol = document.getElementById("vol");
    let volJdColor = document.getElementById("volJdColor");
    let volBlock = document.getElementById("volBlock");




    let songs = [{
        mp3:"music/hai.mp3",
        singer:"beyond",
        name:"海阔天空",
        img:"images/g1.jpg"
    },{
        mp3:"music/guang.mp3",
        singer:"beyond",
        name:"光辉岁月",
        img:"images/g2.jpg"
    },{
        mp3:"music/qin.mp3",
        singer:"beyond",
        name:"情人",
        img:"images/g3.jpg"
    }];
    let changeMusic = function (index) {
        music.src = songs[index].mp3;
        musicPic.src = songs[index].img;
        sName.innerHTML = songs[index].name;
        geshou.innerHTML = songs[index].singer;
        gequJD.style.width = 0;

    };

    let index = 0;
    changeMusic(index);


    playBtn.addEventListener("click",function () {
       if( music.paused){
           music.play();
           event.currentTarget.innerHTML = "暂停";
       }else{
           music.pause();
           event.currentTarget.innerHTML = "开始";
       }
    });
    prevBtn.addEventListener("click",function (event) {
        index--;
        if( index <= -1){
            index = songs.length-1 ;
        }
        changeMusic( index);
    });
    nextBtn.addEventListener("click",function (event) {
        index++;
        if( index > songs.length-1){
            index = 0;
        }
        changeMusic( index);
    });
    //总时长


    music.addEventListener("loadedmetadata",function ( event ) {
        var time=music.duration;
        var min=Math.floor(time%3600);
        tTime.innerHTML = Math.floor(min/60) + ":"+ Math.floor(time%60) ;
    });




    music.addEventListener("canplay",function () {
    music.play();
    });
    music.addEventListener("timeupdate",function () {
       let jd = music.currentTime / music.duration ;
       let bfb = jd*100 + "%";
       gequJD.style.width = bfb ;
        var time=music.currentTime;
        var min=Math.floor(time%3600);
        cTime.innerHTML =  Math.floor(min/60) + ":"+ Math.floor(time%60) ;

    });

    gequJDBar.addEventListener("click",function () {
        let x = event.offsetX ;
        let bfb = x/670*100;
        gequJD.style.width = bfb ;
        music.currentTime = music.duration * bfb/100;
    });
    let setVol = function(event){
        let x = event.offsetX ;
        let bfb = x / 120*100;
        volJdColor.style.width =  bfb +"%";
        volBlock.style.left = bfb+"%";
        music.volume = bfb/100;
    };
    vol.addEventListener("click",function (event) {
        setVol(event);
    });
    vol.addEventListener("mousedown",function (event) {
        vol.addEventListener("mousemove",setVol);
    });
    vol.addEventListener("mouseup",function (event) {
        vol.removeEventListener("mousemove",setVol);
    });
}